<template>
<div>
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <header class="hd-top">
    <h2 class="title"></h2>
  </header>
  <div class="page">
    <div class="driver-head lineb">
      <div class="driver-top displayflex" @click="goMine">
        <div class="pic">
          <img v-if="userinfo.PictContent && userinfo.PictContent != '' && userinfo.PictContent !=null" :src="userinfo.PictContent | filterImgUrl"/>
          <img v-else src="~images/icon/people-ico.png">
        </div>
        <dl class="ctx flex1">
          <dt>{{userinfo.Name}}</dt>
          <dd>共完成{{indexdata.OrderCount}}笔订单</dd>
        </dl>
      </div>
      <div class="displayflex driver-bottom">
        <div class="flex1" @click="awaitList('1')">
          <p><span class="org">{{indexdata.PickOrderCount}}</span>单</p>
          <em>待提货</em>
        </div>
        <div class="flex1" @click="awaitList('2')">
          <p><span class="blue">{{indexdata.DistributionOrderCount}}</span>单</p>
          <em>在途</em>
        </div>
        <div class="flex1" @click="allList('56')">
          <p><span class="blue">{{indexdata.AwaitSignOrderCount}}</span>单</p>
          <em>待签收</em>
        </div>
        <div class="flex1" @click="allList('81')">
          <p><span class="green">{{indexdata.OrderCount}}</span>单</p>
          <em>已签收</em>
        </div>
      </div>
      <!-- <div class="displayflex driver-bottom">
        <div class="flex1" @click="awaitList('1')">
          <p><span class="org">{{indexdata.PickUpIn20OrderCount}}</span>单</p>
          <em>需在20分钟内提货</em>
        </div>
        <div class="flex1" @click="awaitList('2')">
          <p><span class="blue">{{indexdata.SendIn45OrderCount}}</span>单</p>
          <em>需在45分钟内送达</em>
        </div>
      </div> -->
    </div>
    <ul class="main-list mb20">
      <li class="displayflex" @click="awaitList('1')">
        <span class="flex1">需20分钟内提货</span>
        <span class="gray"><em class="red">{{indexdata.PickUpIn20OrderCount}}</em>单</span>
        <i class="iconfont icon-right"></i>
      </li>
      <li class="displayflex" @click="awaitList('2')">
        <span class="flex1">需45分钟内送达</span>
        <span class="gray"><em class="red">{{indexdata.SendIn45OrderCount}}</em>单</span>
        <i class="iconfont icon-right"></i>
      </li>
    </ul>
    <!-- <div class="btn-sign" @click="goLink">签到抢单</div>
    <p class="driver-time">当前时间：08:25:30</p> -->
    <div class="all-title gray" v-if="todolist.length>0">待接单</div>
    <div class="list-warp" v-for="item in todolist">
      <div class="list-ctx">
        <div class="grab-wrap">
          <!--<p class="tit green">有新订单啦！</p>-->
          <div class="addr ft17">
            <span class="dotted"></span>{{item.DepartureProvince | province}}{{item.DepartureCity | city}}{{item.DepartureDistrict | district}}{{item.DepartureAddress}}
          </div>
          <div class="addr ft17" v-if="item.StartBusTerminal"><span class="iconfont icon-trans"></span>{{item.StartBusTerminal.replace(/\//g, "")}}</div>
          <div class="addr ft17">
            <span class="dotted org"></span>{{item.ArrivalProvince | province}}{{item.ArrivalCity | city}}{{item.ArrivalDistrict | district}}{{item.ArrivalAddress}}
          </div>
          <div class="statis ft14 displayflex">
            <span>{{item.OrdersWeight | weight}}，{{item.OrdersVolumn | volumn}}，共{{item.OrdersPKGS}}件</span>
            <div class="flex1 txt-rit">运费<em class="org">￥</em><span class="price org ft16">{{item.DistributionIncome || 0}}</span></div>
          </div>
          <div class="ft14" v-if="item.BusTerminal">客运站：<span class="org">{{item.BusTerminal | noslash}}</span></div>
          <div class="ft14">最晚提货时间：<span class="org">{{item.CollectionTime | ydmhm}}</span></div>
          <div class="ft14">要求到达时间：<span class="org">{{item.LastArrivalArrivedDate | ydmhm}}</span></div>
          <div class="ft14" v-if="item.Memo">备注：<em class="red">{{item.Memo}}</em></div>
        </div>
        <div class="icon-tag" v-if="item.BBillType == 'B05'"><img src="~images/icon/emergent.png"></div>
        <div class="grab-btn btn" @click="TakeOrder(item.Guid, item.BBillGuid)">确认接单</div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      todolist: [],
      showLoad: false,
      indexdata: []
    };
  },
  computed: {
    userinfo() {
      if (localStorage.UserInfo) {
        return JSON.parse(localStorage.UserInfo);
      }
    }
  },
  created() {
    this.getData();
    this.getIndexData();
  },
  methods: {
    awaitList(type) {
      this.$router.push({
        path: "/awaitList",
        query: {
          type: type
        }
      });
    },
    allList(state) {
      this.$router.push({
        path: "/allList",
        query: { gostate: state }
      });
    },
    getData() {
      var query = {
          DriverGuid: this.userinfo.StaffID,
          GrabState: 1,
          PageIndex:1,
          PageSize:100
        },
        _this = this;
      _this.showLoad = true;
      _this.Ajax.post("SearchChosenOrderList", query).then(function(resp) {
        _this.showLoad = false;
        if (resp.IsSuccess) {
          _this.todolist = resp.Datas;
        }
      });
    },
    getIndexData() {
      var self = this;
      var query = {
        Driver1GUID: this.userinfo.StaffID
      };
      self.Ajax.post("DriverIndexInfo", query).then(function(resp) {
        if (resp.IsSuccess) {
          self.indexdata = resp.Data;
        }
      });
    },
    TakeOrder(Guid, BBillGuid) {
      var self = this;
      self.showLoad = true;
      var query = {
        Guid: Guid,
        BBillGuid: BBillGuid,
        GrabState: 1,
        LoginedStaffID: self.userinfo.StaffID,
        LoginedName: self.userinfo.Name
      };
      self.Ajax.post("TakeOrder", query).then(function(resp) {
        self.showLoad = false;
        if (resp.IsSuccess) {
          self.$vux.toast.show({
            type: "success", //success, warn, cancel, text
            text: "接单成功！",
            onHide(){
              location.reload();
            }
          });
        } else {
          location.reload();
          self.$vux.toast.show({
            type: "warn", //success, warn, cancel, text
            text: resp.ErrorMessage,
            onHide(){
              location.reload();
            }
          });
        }
      });
    },
    goMine() {
      this.$router.push({
        path: "/user",
        query: {
          type: "driver"
        }
      });
    }
  }
};
</script>